<template>
  <div  id="tab1"
        style="width: 100%; height: 100%;"
  v-click-outside="onClickOutSide"
  >
    <template  v-if="mode === 'tab'" >
      <zw-tabs class="z-tabs"  selected="1" >
        <z-tab-pane index="1">
          <template #label="scope">Tab1</template>
          <z-draggable-resizable
              v-for="item in data" :key="item.id"
              @click.native="onClickDom(item, $event)"
              :z="item.data.ZINDEX"
              parent="#tab1" :snap="true" :snap-tolerance="20"
              @resizing="(l, t, x,y)=>{drag__collect(item, x, y, l, t)}"
              :onDragStart="onDragStart"
          >
            <z-drag-render :ref="item.id" :item="item"></z-drag-render>
          </z-draggable-resizable>
        </z-tab-pane>
        <z-tab-pane index="2">
          <template #label="scope">Tab2</template>
          2
        </z-tab-pane>
      </zw-tabs>
    </template>

    <template v-else>
      <z-draggable-resizable
          v-for="item in data" :key="item.id"
          @click.native="onClickDom(item, $event)"
          :z="item.data.ZINDEX"
          parent="#tab1" :snap="true" :snap-tolerance="20"
          @resizing="(l, t, x,y)=>{drag__collect(item, x, y, l, t)}"
          :onDragStart="onDragStart"
      >
        <z-drag-render :ref="item.id" :item="item"></z-drag-render>
      </z-draggable-resizable>
    </template>

  </div>
</template>

<script>
import {createDraggableItem, dragCommonMixin} from "@example/views/drag/utils";
import {data_coms} from "@example/views/drag/com";
import ZDragRender from "@example/views/drag/components/ZDragRender";


export default {
  name: 'ZDragContainer',
  components: {ZDragRender},
  props: {
    mode: null
  },
  mixins: [
    dragCommonMixin
  ],
  data() {
    return {
      data: [],
      ZINDEX: 0,
      item: null
    }
  },
  mounted() {
    this.item = this.$parent.item
    // this.appendItem(data_coms[2].children[0])
  },
  methods: {
    onClickDom(item, e) {
      // console.log(e)
      e.stopPropagation();
      // this.$parent.setItemData('draggable', false)
      globalThis.$desginer.setCurrent(item)
    },
    onDragStart() {
      this.$parent.setItemData('draggable', false)
      return true
    },
    onClickOutSide() {
      this.$parent.setItemData('draggable', true)
    },
    appendItem(item) {
      this.data.push(createDraggableItem(item, {
        ZINDEX: this.ZINDEX + 1,
      }));
      this.ZINDEX = this.ZINDEX + 1
    },
  }
}
</script>
